import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

/**
 * threejs 提供了两种不规则曲线的绘制方式
 *  样条曲线：2D: SplineCurve, 3D: CatmullRomCurve3
 *  贝塞尔曲线： 
 *    二次 Bezier 曲线：2D: QuadraticBezierCurve, 3D: QuadraticBezierCurve3
 *    三次 Bezier 曲线：2D: CubicBezierCurve, 3D: CubicBezierCurve3
 */
const scene = new THREE.Scene();

/* 几何体 */
// 三维样条曲线
const geometryCRC3 = new THREE.Geometry();
const crc3 = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-50, 20, 90),
  new THREE.Vector3(-10, 40, 40),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(60, 60, 0),
  new THREE.Vector3(70, 0, 80)
]); // 创建三维样条曲线，给入5个锚点
const pointsCRC3 = crc3.getPoints(100);
geometryCRC3.setFromPoints(pointsCRC3);
// 二次贝塞尔曲线
const geometryQBC3 = new THREE.Geometry();
const geometryQBC3Points = new THREE.Geometry();
const p1 = new THREE.Vector3(-80, 0, 0); // 起始点
const p2 = new THREE.Vector3(20, 100, 0); // 控制点
const p3 = new THREE.Vector3(80, 0, 0); // 结束点
const qbc3 = new THREE.QuadraticBezierCurve3(p1, p2, p3); // 创建二次贝塞尔曲线
const pointsQBC3 = qbc3.getPoints(100);
geometryQBC3.setFromPoints(pointsQBC3);
geometryQBC3Points.vertices = [p1, p2, p3];
// 三次贝塞尔曲线
const geometryCBC3 = new THREE.Geometry();
const geometryCBC3Points = new THREE.Geometry();
const p4 = new THREE.Vector3(-80, 0, 0); // 起始点
const p5 = new THREE.Vector3(-40, 100, -50); // 控制点1
const p6 = new THREE.Vector3(40, 100, 50); // 控制点2
const p7 = new THREE.Vector3(80, 0, 0); // 结束点
const cbc3 = new THREE.CubicBezierCurve3(p4, p5, p6, p7); // 创建三次贝塞尔曲线
const pointsCBC3 = cbc3.getPoints(100);
geometryCBC3.setFromPoints(pointsCBC3);
geometryCBC3Points.vertices = [p4, p5, p6, p7];

/* 材质 */
// 红色线条材质
const materialCRC3 = new THREE.LineBasicMaterial({
  color: 0xff0000
});
// 绿色线条材质
const materialQBC3 = new THREE.LineBasicMaterial({
  color: 0x00ff00
});
// 绿色虚线材质
const materialQBC3Dash = new THREE.LineDashedMaterial({
  color: 0x00ff00,
	dashSize: 10,
  gapSize: 5
})
// 绿色点材质
const materialQBC3Points = new THREE.PointsMaterial({
  color: 0x00ff00,
  size: 10
});
// 蓝色线条材质
const materialCBC3 = new THREE.LineBasicMaterial({
  color: 0x0000ff
});
// 蓝色虚线材质
const materialCBC3Dash = new THREE.LineDashedMaterial({
  color: 0x0000ff,
	dashSize: 10,
  gapSize: 5
});
// 蓝色点材质
const materialCBC3Points = new THREE.PointsMaterial({
  color: 0x0000ff,
  size: 10
});

/* 模型 */
// 线条模型对象
const lineCRC3 = new THREE.Line(geometryCRC3, materialCRC3);
scene.add(lineCRC3);
// 二次贝塞尔曲线模型对象
const lineQBC3 = new THREE.Line(geometryQBC3, materialQBC3);
scene.add(lineQBC3);
const pointQBC3Points = new THREE.Points(geometryQBC3Points, materialQBC3Points);
scene.add(pointQBC3Points);
const dashQBC3Points = new THREE.Line(geometryQBC3Points, materialQBC3Dash);
scene.add(dashQBC3Points);
// 三次贝塞尔曲线
const lineCBC3 = new THREE.Line(geometryCBC3, materialCBC3);
scene.add(lineCBC3);
const pointCBC3Points = new THREE.Points(geometryCBC3Points, materialCBC3Points);
scene.add(pointCBC3Points);
const dashCBC3Points = new THREE.Line(geometryCBC3Points, materialCBC3Dash);
scene.add(dashCBC3Points);

/* 辅助线 */
// const axisH = new THREE.AxisHelper(200);
// scene.add(axisH);

/* 相机 */
const k = innerWidth / innerHeight,
      s = 45,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

/* 渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xaaaaaa);
document.body.appendChild(renderer.domElement);

/* 控制器 */
new OrbitControls(camera, renderer.domElement);

/* 渲染入口 */
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();